<!-- @format -->

<template>
  <div>
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>

    <view class="easyClear-content" :style="[{ top: top + 'px' }]">
      <view class="form">
        <view class="order">
          <view class="orderTitle">问题描述</view>
          <view class="uni-textarea">
            <textarea
              @blur="bindTextAreaBlur"
              class="areaContent"
              v-model="form.text"
              placeholder-class="textArea"
              placeholder="详细描述问题或建议"
              @input="sumfontnum" />
            <view class="num">
              <text>{{ fontNum }}</text>
              /200
            </view>
          </view>

          <view class="pictures">上传图片</view>

          <view class="example-body">
            <uni-file-picker
              @select="uploadFile"
              limit="9"
              title="最多选择9张图片"></uni-file-picker>
          </view>
          <view class="submit">
            <button class="submit" @tap="submit">提交反馈</button>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import { validate } from '@/utils/validate'
export default {
  data() {
    return {
      top: 66,
      childTitle: '意见反馈',
      fontNum: 0,
      form: {
        text: '',
      },
      phonenumber: 0,
      pictList: [],
      pictImg: '',
      rules: {
        text: [{ required: true, message: '请填写问题描述' }],
      },
    }
  },
  onLoad(options) {
    let _this = this
    _this.phonenumber = uni.getStorageSync('phonenumber')
  },

  methods: {
	  onShareAppMessage() {
	  return {
	      title: '意见反馈',
	      imageUrl: this.img,
	    }
	  },
	  onShareTimeline() {
	    return {
	      title: '意见反馈',
	      imageUrl: this.img,
	    }
	  },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    bindTextAreaBlur: function (e) {
      console.log(e.detail.value)
    },
    // 限制文本框字数
    sumfontnum(e) {
      console.log(e)
      this.fontNum = e.detail.value.length
    },
    uploadFile(file) {
      let _this = this

      file.tempFilePaths.forEach((item) => {
        console.log(item)
        uni.uploadFile({
          url: _this.$httpApi.install.fileUpload, // 接口地址
          name: 'file', // 接口参数名
          filePath: item, // 文件路径(接口参数值)
          // 请求成功
          success(res) {
            const obj = JSON.parse(res.data)
            _this.pictList.push(obj.data.url)
            _this.pictImg = _this.pictList.join(',')
            // 提示用户
            // uni.showToast({ icon: 'success', title: '头像更新成功~' })
          },
        })
      })
    },
    submit() {
      let _this = this
      if (!validate(_this.form, _this.rules)) return
      uni.request({
        url: _this.$httpApi.install.opinion,
        method: 'POST',
        data: {
          content: this.form.text,
          file: _this.pictImg,
          createBy: _this.phonenumber,
        },
        success: (success) => {
          uni.showToast({ icon: 'success', title: '提交成功~' })
          setTimeout(() => {
            uni.navigateBack({})
          }, 500)
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.easyClear-content {
  position: absolute;
  // padding: 0 30rpx;
  // background: #f8fafe;
  // padding-top: 43rpx;
}
.order {
  padding: 0 30rpx;
  padding-top: 43rpx;
  width: 750rpx;
  height: 90vh;
  background: #f8fafe;
  position: relative;
}
/deep/ .textArea {
  margin-left: 30rpx !important;
  left: 30rpx;
  color: #a4a4a4;
  // font-size: 10rpx;
}
.orderTitle {
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  color: #303030;
}
.areaContent {
  margin-top: 20rpx;
  background-color: #fff;
  width: 100%;
  height: 300rpx;
}
.num {
  position: absolute;
  top: 340rpx;
  right: 60rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #a4a4a4;
}

.pictures {
  margin-top: 39rpx;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  color: #303030;
}
.submit {
  margin-top: 240rpx;
  // margin-left: 18rpx;
  width: 689rpx;
  height: 88rpx;
  background: #303030;
  box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  font-size: 36rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
</style>
